<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>某个用户对应的角色</title>
    <style type="text/css">
        .lxb-row {
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .layui-table-header > .layui-table tr th[data-field=id] {
            display: none;
        }
    </style>
</head>
<body>
<div class="lxb-row">
    <div>
        <fieldset class="layui-elem-field layui-field-title" style="margin: 0px;">
            <legend>用户已拥有的角色</legend>
        </fieldset>
        <table class="layui-table" id="ownRoleTable" lay-filter="ownRoleTable">
            <thead>
            <tr>
                <th lay-data="{type: 'numbers', fixed: true}"></th>
                <th lay-data="{type: 'checkbox', fixed: true}"></th>
                <th lay-data="{field: 'id', minWidth: 0.001, width: '0%', type:'space', style: 'display: none'}"></th>
                <th lay-data="{field:'name', width: 100}">角色名称</th>
                <th lay-data="{field:'roleKey', width: 130}">角色KEY</th>
                <th lay-data="{field:'description'}">角色描述</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="role : ${ownRoles}">
                <td></td>
                <td></td>
                <td>[[${role.id}]]</td>
                <td>[[${role.name}]]</td>
                <td>[[${role.roleKey}]]</td>
                <td>[[${role.description}]]</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div style="width: 100px">
        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;">
            <button type="button" class="btn btn-outline-secondary" onclick="rightMove();">
                <i class="layui-icon">&#xe602;</i>
            </button>
            <button type="button" class="btn btn-outline-secondary" onclick="leftMove();">
                <i class="layui-icon">&#xe603;</i>
            </button>
        </div>
    </div>
    <div>
        <fieldset class="layui-elem-field layui-field-title" style="margin: 0px;">
            <legend>其他角色</legend>
        </fieldset>
        <table class="layui-table" id="notOwnRoleTable" lay-filter="notOwnRoleTable">
            <thead>
            <tr>
                <th lay-data="{type: 'numbers', fixed: true}"></th>
                <th lay-data="{type: 'checkbox', fixed: true}"></th>
                <th lay-data="{field: 'id', minWidth: 0.001, width: '0%', type:'space', style: 'display: none'}"></th>
                <th lay-data="{field:'name', width: 100}">角色名称</th>
                <th lay-data="{field:'roleKey', width: 130}">角色KEY</th>
                <th lay-data="{field:'description'}">角色描述</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="role : ${notOwnRoles}">
                <td></td>
                <td></td>
                <td>[[${role.id}]]</td>
                <td>[[${role.name}]]</td>
                <td>[[${role.roleKey}]]</td>
                <td>[[${role.description}]]</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
<script type="text/javascript">
    layui.table.init('ownRoleTable', {
        height: 400
        , width: 450
    });
    layui.table.init('notOwnRoleTable', {
        height: 400
        , width: 450
    });

    function leftMove() { // 添加角色
        var checkStatus = layui.table.checkStatus('notOwnRoleTable'); //test即为基础参数id对应的值
        console.log('leftMove', checkStatus.data) // 获取选中行的数据
        if (checkStatus.data.length == 0) {
            layui.layer.msg("您还没选择添加的角色");
            return;
        }
        var roleIds = checkStatus.data.map(function (role) {
            return role.id;
        });
        console.log('roleIds = ', roleIds);
        $.post("/admin/users/" + selectedUser.id + "/addRoles", {
            'roleId': roleIds
        }, function (data, textStatus, req) {
            console.log("data = ", data);
            if (data.result == 1) {
                // renderTables(data.ownRoles, data.notOwnRoles);
                layui.table.reload('notOwnRoleTable', {
                    'data': data.notOwnRoles
                });
                layui.table.reload('ownRoleTable', {
                    'data': data.ownRoles
                });
            }
        });
    }

    function rightMove() { // 删除角色
        var checkStatus = layui.table.checkStatus('ownRoleTable'); //test即为基础参数id对应的值
        console.log('rightMove', checkStatus.data) //获取选中行的数据
        if (checkStatus.data.length == 0) {
            layui.layer.msg("您还没选择删除的角色");
            return;
        }
        var roleIds = checkStatus.data.map(function (role) {
            return role.id;
        });

        $.ajax("/admin/users/" + selectedUser.id + "/roles", {
            type: 'post',
            data: {
                'roleId': roleIds,
                '_method': 'delete'
            },
            dataType: "json", // 预期服务器返回的数据类型
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layui.layer.msg('删除出错了');
            },
            success: function (data, textStatus, jqXHR) {
                console.log("data = ", data);
                if (data.result == 1) {
                    layui.table.reload('notOwnRoleTable', {
                        'data': data.notOwnRoles
                    });
                    layui.table.reload('ownRoleTable', {
                        'data': data.ownRoles
                    });
                } else {
                    layui.layer.msg(data.msg);
                }
            }
        });
    }
</script>
</body>
</html>